  {literal}
  <script>
  	var i = 0;
	function addElement()
	{
		var name = document.frmAdmin.phone.value;
		if(isBlank(name)) {
			alert('Please input the phone');
			return false;
		}
		if(!phonenumber(name)) {
			alert('The phone is invalid');
			return false;
		}		
		var para=document.createElement("div");
		para.setAttribute('id', i);
		//var node=document.createTextNode(name + '<a href="#" role="button" data-toggle="modal"><i class="icon-remove"></i></a>');
		//para.appendChild(node);
		para.innerHTML = name + ' <a href="#" role="button" data-toggle="modal" onClick="javascript:removeElement(\''+i+'\', \''+name+'\');"><i class="icon-remove"></i></a>';
		
		var element=document.getElementById("listPhone");
		element.appendChild(para);
		i = i + 1;
		document.frmAdmin.phone.value = '';		
		document.frmAdmin.list.value = document.frmAdmin.list.value + name + '\n';		
	}
	function removeElement(id, name)
	{
		var parent=document.getElementById("listPhone");
		var child=document.getElementById(id);
		parent.removeChild(child);
		var str=document.frmAdmin.list.value;
		document.frmAdmin.list.value=str.replace( name + "\n", "");
	}
	
	function phonenumber(inputtxt)  
	{  
	  var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; 
	  if((inputtxt.match(phoneno)))  
	  {  
		  return true;  
	  }  
	  else  
	  {  
			return false;  
	  }  
	}  	
	function isBlank(str) {
		return (!str || /^\s*$/.test(str));
	}	
  </script>

  {/literal}
  
  <!-- Content Area -->
<div class="dma-thumbnail">
    <div class="content">
            
        <div class="header">
            
            <h1 class="page-title">Edit Group</h1>
        </div>
        
        <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="{$link_return}">Group</a> <span class="divider">/</span></li>
            <li class="active">Edit</li>
        </ul>        
		{if $msg}
        <div class="alert alert-success">
         <button class="close" data-dismiss="alert" type="button">×</button>
        {$msg}   
        </div>
        {/if}    
        <div class="container-fluid">
        	<form name="frmAdmin" action="{$action}" method="post">
            <div class="row-fluid">
                <div class="btn-toolbar">
                    <button class="btn btn-primary" type="button" onclick="javascript:document.frmAdmin.submit();"><i class="icon-save"></i> Save</button>
                    <a href="{$link_return}" data-toggle="modal" class="btn">Cancel</a>
                  <div class="btn-group">
                  </div>
                </div>
                <div class="well">
                    
                        <label>Name</label>
                        <input type="text" name="name" maxlength="100" value="{$name|escape}" size="30">
                	
                </div>
				<div class="well">
                  <div class="filter-search">
                    <label>Phone:</label>
                    <div class="input-append">
                        <input type="text" name="phone" id="phone" value=""  title="phone" class="span2 search-query" />
                        <button type="button" class="btn" onclick="javascript:addElement();" >Add</button>
                    </div>                    
                  </div>
                      <input type="hidden" name="list" value="{$list}" />
                      <div>&nbsp;</div>
                      <div class="well">
                        <div id="listPhone">
                        {if $arrLists}  
                        {foreach from=$arrLists item=category key=key}
                            {if $category }
                        	<div id="{$key}">{$category} <a href="#" role="button" data-toggle="modal" onClick="javascript:removeElement('{$key}', '{$category}');"><i class="icon-remove"></i></a></div>
                            {/if}
                        {/foreach}
                        {/if}                        
                        </div>
                      </div>                                                           
                </div>                                                        
            </div>
            </form>
        </div>
    </div>
</div>

    
    <noscript>
    Warning! JavaScript must be enabled for proper operation of the Administrator backend.
    </noscript>
    <div class="clr"></div>
  </div>
  <!-- end of content -->